<template>
  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="active" finish-status="success">
          <el-step title="选择图片"></el-step>
          <el-step title="选择算子"></el-step>
          <el-step title="开始测试"></el-step>
        </el-steps>

      </div>

    </el-card>
    <div style=" overflow: auto; height: 800px">

      <el-row>
        <el-card class="box-card" style="overflow: auto">
          <el-col :span="8">
            <div>
              <el-card class="box-card" style="overflow: auto">
                <div slot="header" class="clearfix">
                  <span>已选图片</span>
                </div>
                <div>
                  <el-image class="demonstration" :src="choosePicUrl"></el-image>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-card class="box-card" shadow="always">
                <div slot="header" class="clearfix">
                  <span>图片与算子</span>
                </div>
                <el-collapse accordion>
                  <el-collapse-item title="图片" name="1">
                    <el-collapse accordion>
                      <el-collapse-item title="本地图片" name="1">
                        <el-select v-model="typevalue" filterable placeholder="请选择" @change="picTypeRequest">
                          <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                        <el-table
                          :data="PicData"
                          style="width: 100%"
                          @row-click=setPicUrl

                        >
                          <el-table-column
                            fixed
                            :show-overflow-tooltip="true"
                            prop="name"
                            label="名称"
                            width="150">
                          </el-table-column>
                          <el-table-column
                            fixed
                            :show-overflow-tooltip="true"
                            prop="src"
                            label="所属存储桶"
                          >
                          </el-table-column>
                          <el-table-column
                            fixed="right"
                            label="使用图片"
                            width="120">
                            <el-button type="primary" icon="el-icon-open" circle></el-button>
                          </el-table-column>
                        </el-table>
                      </el-collapse-item>
                      <el-collapse-item title="视频截图" name="2">
                        <el-table
                          :data="dirdata"
                          style="width: 100%;margin-bottom: 20px;max-height: 500px"
                          row-key="id"
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                          <el-table-column
                            width="200px"
                            prop="create_datetime"
                            label="创建时间"

                          >
                          </el-table-column>
                          <el-table-column
                            prop="dir"
                            label="目录"
                            sortable
                          >
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="文件名"
                            sortable
                          >
                          </el-table-column>

                          <el-table-column
                            label="操作"
                            fixed="right"
                            width="120px"
                          >
                            <template slot-scope="scope">
                              <el-button v-if="scope.row.param1 =='test'" type="danger" icon="el-icon-delete" circle
                                         @click="delScreenshot(scope)"></el-button>
                              <el-button v-if="scope.row.param1 !=='test'" type="primary" icon="el-icon-check" circle
                                         @click="showimg(scope)"></el-button>
                            </template>
                          </el-table-column>

                        </el-table>
                      </el-collapse-item>
                    </el-collapse>
                  </el-collapse-item>
                  <el-collapse-item title="算子" name="1=2">
                    <el-table
                      :data="OpData"
                      @row-click=getParam
                      style="width: 100%"

                      max-height="500">

                      <el-table-column
                        fixed
                        :show-overflow-tooltip="true"
                        prop="name"
                        label="算子名称"
                        width="150">
                      </el-table-column>
                      <el-table-column
                        fixed
                        :show-overflow-tooltip="true"
                        prop="description"
                        label="算子描述"
                        width="150">
                      </el-table-column>
                      <el-table-column
                        fixed
                        :show-overflow-tooltip="true"
                        prop="content"
                        label="算子内容"
                      >
                      </el-table-column>
                      <el-table-column
                        fixed="right"
                        label="启用算子"
                        width="120">
                        <template slot-scope="scope">
                          <el-button type="primary" icon="el-icon-open" circle
                                     @click="dialog = true;this.active = 3"></el-button>

                        </template>
                      </el-table-column>
                    </el-table>
                  </el-collapse-item>
                </el-collapse>
              </el-card>

            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-card class="box-card" style="overflow: auto">
                <div slot="header" class="clearfix">
                  <span>结果</span>
                </div>
                <div>
                  <el-image class="demonstration" :src="resultPicUrl"></el-image>
                </div>
              </el-card>

            </div>
          </el-col>
        </el-card>
      </el-row>
    </div>
    <el-drawer
      title="参数设置"
      :visible.sync="dialog"
      direction="rtl"
      size="16%"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <div class="mobile" v-for="(val,key) in params" style="margin-bottom: 10px">
          <!--            <div style="margin-left: 10px">{{key}}</div>-->
          <el-tag style="margin-left: 10px; display: block;width: 100px">{{ key }}</el-tag>
          <el-input v-model="params[key]" placeholder="key" size="small"
                    style="margin-left: 10px; width: 100px"></el-input>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="postParams2backEnd" style="margin-left: 10px">开始测试</el-button>
          <el-button @click="dialog = false">取消</el-button>

        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// 编辑器代码格式
// import 'vue-codemirror/node_modules/codemirror/mode/properties/properties.js'
// // 自动刷新(防止codemirror需要手动刷新才出数据)
// import 'vue-codemirror/node_modules/codemirror/addon/display/autorefresh'
// import 'vue-codemirror/node_modules/codemirror/mode/python/python.js'
// // 主题
// import 'vue-codemirror/node_modules/codemirror/theme/ayu-mirage.css'
// import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
// import 'vue-codemirror/node_modules/codemirror/theme/darcula.css'
// import 'vue-codemirror/node_modules/codemirror/theme/dracula.css'
// import 'vue-codemirror/node_modules/codemirror/theme/midnight.css'
// import 'vue-codemirror/node_modules/codemirror/theme/elegant.css'

import {
  GetList,
  GetOpList,
  Post2End,
  OpPost2End,
  GetScreenShotsList,
  DelScreenShots,
  DelOp,
  GetOne,
} from './api.js'
import * as api from '@/views/datasource/localimg/api';

export default {
  name: 'form',
  components: {},
  data() {
    return {
      active: 0,
      typevalue: '',
      typeList: [],
      codeSnippets: '',
      cmOptions: {
        autorefresh: true,
        tabSize: 4,
        lineNumbers: true,
        mode: 'text/x-python',
        theme: 'darcula',
        line: true,
        viewportMargin: Infinity,
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 2,
        smartIndent: true,
        showCursorWhenSelecting: true,
        firstLineNumber: 1
      },
      PicData: [{ //  图片列表的数据
        name: '',
        url: ''
      }],
      dirdata: [],
      choosePicUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', // 测试图片url
      resultPicUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', // 测试完成图片url
      OpData: [],
      params: {}, // 单个算子的参数
      dialog: false, // 参数设置页面开关参数
      postParams: {},
      fn: ' ', // 函数体内容
      picUrl: '', // 传回后端的参数 图片地址
      dialogVisible: false, // 算子上传对话框控制

    }
  },
  computed: {},
  async created() {
    const resPic = await GetList({
      typeid: 3
    })
    const res = await api.GetTypeList()
    this.typeList = res.data.data
    this.PicData = resPic.data.data
    const resOp = await GetOpList({page: 1, limit: 999})
    this.OpData = resOp.data.data
    this.getdata()
  },
  methods: {

    async picTypeRequest(e) {
      const res = await api.GetList({
        typeid: e
      })
      this.PicData = res.data.data
      console.log(res)
    },

    async delScreenshot(e) {
      // console.log(e)
      const res = await DelScreenShots(e.row.id)
      this.getdata()
      if (res.code === 2000) {
        this.$message.success('删除成功')
      }
      console.log(res)
    },

    async deloperator(e) {
      console.log(e)
      const res = await DelOp(e.row.id)
      if (res.code === 2000) {
        this.$message.success('删除成功')
        const resOp = await GetOpList({page: 1, limit: 999})
        this.OpData = resOp.data.data
      }
      console.log(res)
    },

    showimg(e) {
      this.active = 1
      this.choosePicUrl = 'http://127.0.0.1:8000/' + e.row.dir
      this.picUrl = e.row.dir
    },

    async setPicUrl(para) {
      this.active = 1
      const res = await GetOne(para)
      console.log(res)
      console.log(para)
      this.choosePicUrl = 'http://127.0.0.1:8000/' + res.data.data.path
      // this.choosePicUrl = res.data.data
      this.picUrl = res.data.data.path
    },

    getParam(e) {
      this.active = 2
      this.params = e.parameters
      this.fn = e.content
    },

    async postParams2backEnd() {
      this.active = 3
      for (const i in this.params) {
        this.params[i] = parseInt(this.params[i])
      }

      const res = await Post2End({params: this.params, fn: this.fn, url: this.picUrl})
      this.resultPicUrl = 'data:image/jpg;base64,' + res.data.data
    },

// /
    async getdata() {
      this.dirdata = []
      const res = await GetScreenShotsList({
        page: 1,
        limit: 999
      })
      console.log(res)
      res.data.data.forEach(x => {
        x.children = []
        for (let i = 1; i <= parseInt(x.src); i++) {
          x.children.push({
            id: parseInt(x.id + '' + i),
            create_datetime: x.create_datetime,
            name: x.name + i + '.jpg',
            dir: 'media/screenshots/' + x.dir + '/' + x.name + i + '.jpg'
          })
        }
        this.dirdata.push(x)
      })
    }

  }
}
</script>
<style scoped>

.CodeMirror {
  font-family: monospace;
  height: 100vh;
  color: black;
  direction: ltr;
}

.box-card {
  width: 100%;
  overflow: hidden;
}
</style>
